<template>
  <div class="article-classify">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>文章分类</span>
          <el-button type="primary" @click="add"> 添加分类 </el-button>
        </div>
      </template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号">
          <template #default="scope">
            <div>{{ scope.$index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="分类名称" />
        <el-table-column prop="alias" label="分类别名" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >修改</el-button
            >
            <el-popconfirm
              title="确定删除此分类吗?"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleDelete(scope.$index, scope.row)"
              @cancel="() => ElMessage('已取消')"
            >
              <template #reference>
                <el-button size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogFormVisible" :title="dialogTitle">
      <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="分类别名" prop="alias">
          <el-input v-model="form.alias" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false"> 取消 </el-button>
          <el-button type="primary" @click="dialogConfirm(formRef)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref, reactive, computed } from "vue";
import store from "../store";
import qs from "qs";
import {
  articleCatesRequest,
  addArticleCatesRequest,
  deleteArticleCatesRequest,
  updateArticleCatesRequest,
} from "../api/article";
// 表格数据
let tableData = computed(() => {
  return store.state.articleCates;
});
// 弹窗flag
const dialogFormVisible = ref(false);
// 弹窗title
const dialogTitle = ref("");
// 弹窗表单数据
const form = reactive({
  name: "",
  alias: "",
});
// 弹窗表单校验规则
const rules = reactive({
  name: [
    {
      required: true,
      message: "分类名称不能为空!",
      trigger: "blur",
    },
  ],
  alias: [
    {
      required: true,
      message: "分类别名不能为空!",
      trigger: "blur",
    },
  ],
});
// 弹窗表单ref
const formRef = ref();
// 修改分类项的id暂存
const itemId = ref();

// 确定添加文章分类
const addArticleClassify = async formRef => {
  if (!formRef) return;
  await formRef.validate(async (valid, fields) => {
    if (valid) {
      const params = qs.stringify(form);
      const { data: res } = await addArticleCatesRequest(params);
      const { status, message } = res;
      if (status !== 0) ElMessage.error(message);
      // 重新获取文章分类列表
      // getarticleCatesRequest()
      store.dispatch("getarticleCatesRequest");
    } else {
      ElMessage.error("校验不通过!");
    }
  });
  // 重置表单
  formRef.resetFields();
  // 关闭弹窗
  dialogFormVisible.value = false;
};
// 修改分类按钮事件
const handleEdit = (index, row) => {
  // ElMessage.error('无权修改!')
  dialogFormVisible.value = true;
  dialogTitle.value = "修改文章分类";
  itemId.value = row.id;
  form.name = row.name;
  form.alias = row.alias;
};
// 确定修改文章分类
const updateArticleClassify = async formRef => {
  if (!formRef) return;
  await formRef.validate(async (valid, fields) => {
    if (valid) {
      const params = qs.stringify({
        id: itemId.value,
        ...form,
      });
      const { data: res } = await updateArticleCatesRequest(params);
      const { status, message } = res;
      if (status !== 0) ElMessage.error(message);
      // 重新获取文章分类列表
      // getarticleCatesRequest()
      store.dispatch("getarticleCatesRequest");
    } else {
      ElMessage.error("校验不通过!");
    }
  });
  // 重置表单
  await formRef.resetFields();
  // 关闭弹窗
  dialogFormVisible.value = false;
};
// 弹窗确定按钮事件
const dialogConfirm = formRef => {
  if (dialogTitle.value === "添加文章分类") {
    addArticleClassify(formRef);
  }
  if (dialogTitle.value === "修改文章分类") {
    updateArticleClassify(formRef);
  }
};
// 删除操作
const handleDelete = async (index, row) => {
  // ElMessage.error('无权删除!')
  const { data: res } = await deleteArticleCatesRequest(row.id);
  const { status, message } = res;
  if (status !== 0) ElMessage.error(message);
  // await getarticleCatesRequest()
  store.dispatch("getarticleCatesRequest");
  ElMessage.success(message);
};
// 添加分类按钮事件
const add = formRef => {
  // 重置表单
  form.name = "";
  form.alias = "";
  dialogFormVisible.value = true;
  dialogTitle.value = "添加文章分类";
};
// 获取文章分类数据
// store.dispatch('getarticleCatesRequest')
// tableData.value = computed(() => {
//   return store.state.articleCates
// })

// const getarticleCatesRequest = async () => {
//   const { data: res } = await articleCatesRequest()
//   const { status, message, data } = res
//   if (status !== 0) ElMessage.error(message)
//   tableData.value = data
// }
// getarticleCatesRequest()
</script>

<style lang="scss" scoped></style>
